<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>注册</title>
    <link rel="stylesheet" type="text/css" href="css/common.css">
    <link rel="stylesheet" href="css/register.css">
    <!--导入jquery-->
    <script src="js/jquery-3.3.1.js"></script>
</head>
<body>
<!--引入头部-->
<div id="header"></div>
<!-- 头部 end -->
<div class="rg_layout" style="background-image: url(xianhua_img/register_bg.jpg)">
    <div class="rg_form clearfix">
        <div class="rg_form_left">
            <p>新用户注册</p>
            <p>USER REGISTER</p>
        </div>
        <div class="rg_form_center">
            <!--注册表单-->
            <form id="registerForm">
                <!--提交处理请求的标识符-->
                <input type="hidden" name="action" value="register">
                <table style="margin-top: 25px;">
                    <tr>
                        <td class="td_left">
                            <label for="username">用户名</label>
                        </td>
                        <td class="td_right">
                            <input type="text" id="username" name="username" placeholder="请输入账号">
                        </td>
                    </tr>
                    <tr>
                        <td class="td_left">
                            <label for="password">密码</label>
                        </td>
                        <td class="td_right">
                            <input type="password" id="password" name="password" placeholder="请输入密码">
                        </td>
                    </tr>
                    <tr>
                        <td class="td_left">
                            <label for="email">Email</label>
                        </td>
                        <td class="td_right">
                            <input type="text" id="email" name="email" placeholder="请输入Email">
                        </td>
                    </tr>
                    <tr>
                        <td class="td_left">
                            <label for="name">姓名</label>
                        </td>
                        <td class="td_right">
                            <input type="text" id="name" name="name" placeholder="请输入真实姓名">
                        </td>
                    </tr>
                    <tr>
                        <td class="td_left">
                            <label for="telephone">手机号</label>
                        </td>
                        <td class="td_right">
                            <input type="text" id="telephone" name="telephone" placeholder="请输入您的手机号">
                        </td>
                    </tr>
                    <tr>
                        <td class="td_left">
                            <label for="sex">性别</label>
                        </td>
                        <td class="td_right gender">
                            <input type="radio" id="sex" name="sex" value="男" checked> 男
                            <input type="radio" name="sex" value="女"> 女
                        </td>
                    </tr>
                    <tr>
                        <td class="td_left">
                            <label for="birthday">出生日期</label>
                        </td>
                        <td class="td_right">
                            <input type="date" id="birthday" name="birthday">
                        </td>
                    </tr>
                    <tr>
                        <td class="td_left">
                            <label for="check">验证码</label>
                        </td>
                        <td class="td_right check">
                            <input type="text" id="check" name="check" class="check">
                            <img id="picCode" src="code" height="32px" style="cursor: pointer">
                            <script type="text/javascript">
                                $("#picCode").click(function () {
                                    //设置新的随机参数
                                    $(this).attr("src", "code?t=" + Math.random());
                                });
                            </script>
                        </td>
                    </tr>
                    <tr>
                        <td class="td_left">
                        </td>
                        <td class="td_right check">
                            <input type="button" id="btnReg" class="submit" value="注册" style="cursor: pointer">
                            <span id="msg" style="color: red;"></span>
                        </td>
                    </tr>
                </table>
            </form>
        </div>
        <div class="rg_form_right">
            <p>
                已有账号？
                <a href="#">立即登录</a>
            </p>
        </div>
    </div>
</div>
<!--引入尾部-->
<div id="footer"></div>
<!--导入布局js，共享header和footer-->
<script type="text/javascript" src="js/include.js"></script>
<script type="text/javascript">
    //表单提交数据验证事件
    function checkUsername() {
        //数据验证，用户名验证
        //获取用户名
        var username = $("#username").val();
        //校验用户名，校验要求用户名字符长度6~18个字符，首字符必须为英文字母，其它字符为数字或英文字母或下划线
        var reg = /^[a-zA-Z]\w{5,17}$/;
        //使用正则表达式校验用户名
        if (reg.test(username)) {
            //校验通过，提交表单
            return true;
        } else {
            //校验不通过，不提交，提示用户用户名输入数据格式错误
            $("#msg").html("用户名验证不通过");
            $("#username").select();  //选中文本框中的内容
            return false;
        }
    }

    //生日不能为空
    function checkBirthday() {
        //得到生日的值
        var bithday = $("#birthday").val().trim();
        if (bithday == "") {
            $("#msg").html("生日不能为空");
            $("#birthday").focus();
            return false;
        }
        return true;
    }

    //注册按钮点击事件，提交表单数据
    $("#btnReg").click(function () {
        //如果表单项验证正确，则提交数据给服务器
        if (checkUsername() && checkBirthday()) {
            //对表单数据进行序列化
            var param = $("#registerForm").serialize();
            $.post({
                url: "user",
                data: param,
                success: function (data) {
                    if (data == "success") {
                        //返回成功，跳转到成功页面
                        location.href = "register_ok.html";
                    }
                    else {
                        //得到服务器返回的数据
                        $("#msg").html(data);
                    }
                },
                error: function () {
                    alert("服务器出现异常");
                }
            });
        }
    });
</script>
</body>
</html>